<template>
  <!-- 导航栏布局结构:整体布局架构 -->
  <nav class="navbar">
    <!-- Flexbox 布局设计 -->
    <div class="nav-container">
      <!-- Logo区域 -->
      <div class="nav-logo">
        <div class="logo-link" @click="handleMenuClick('home')">
          <img 
            src="../assets/logo.png" 
            alt="宝可梦图鉴" 
            class="logo-image"
          />
        </div>
      </div>
      
      <!-- 导航菜单 -->
      <!-- 通过 v-for 循环渲染:导航菜单项间隔 -->
      <div class="nav-menu">
        <div 
          v-for="item in menuItems" 
          :key="item.key"
          class="nav-item"
          :class="{ active: currentPage === item.key }"
          @click="handleMenuClick(item.key)"
        >
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </div>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <div class="nav-mobile" @click="toggleMobileMenu">
        <i class="mobile-menu-icon">☰</i>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="mobile-menu" :class="{ show: showMobileMenu }">
      <div 
        v-for="item in menuItems" 
        :key="item.key"
        class="mobile-nav-item"
        :class="{ active: currentPage === item.key }"
        @click="handleMobileMenuClick(item.key)"
      >
        <i :class="item.icon"></i>
        <span>{{ item.name }}</span>
      </div>

    </div>
  </nav>
</template>

<script setup>
import { ref, inject } from 'vue'
import { useRouter } from 'vue-router'

const showMobileMenu = ref(false)

// 注入父组件的页面切换方法和当前页面状态
const switchPage = inject('switchPage')
const currentPage = inject('currentPage')

// 菜单项配置，对应关系，比如：宝可梦 → key: 'home' → 对应首页/宝可梦页面
const menuItems = ref([
  { key: 'home', name: '宝可梦', icon: 'icon-home' },
  { key: 'skills', name: '技能', icon: 'icon-skills' },
  { key: 'evolution', name: '进化', icon: 'icon-evolution' },
  { key: 'items', name: '道具', icon: 'icon-items' }
])

// 处理菜单点击
const handleMenuClick = (pageKey) => {
  if (switchPage) {
    switchPage(pageKey)
  }
}

// 处理移动端菜单点击
const handleMobileMenuClick = (pageKey) => {
  handleMenuClick(pageKey)
  closeMobileMenu()
}



// 切换移动端菜单
const toggleMobileMenu = () => {
  showMobileMenu.value = !showMobileMenu.value
}

// 关闭移动端菜单
const closeMobileMenu = () => {
  showMobileMenu.value = false
}
</script>

<style scoped>
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #2c4564;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 70px;
}

/* Logo区域 */
.nav-logo .logo-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-logo .logo-link:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.logo-image {
  height: 50px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* 导航菜单 */
/* 导航菜单项间隔 */
.nav-menu {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin: 0 50px;
}

/* 导航菜内部间隔 */
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 30px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
}

.nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.nav-item.active {
  color: #ffffff;
  background: #24cbaa;
  border-color: #24cbaa;
  box-shadow: 0 4px 15px rgba(36, 203, 170, 0.4);
}



/* 移动端菜单按钮 */
.nav-mobile {
  display: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #ffffff;
}

.mobile-menu-icon {
  font-style: normal;
}

/* 移动端菜单 */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #2c4564;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-menu.show {
  max-height: 300px;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.mobile-nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.mobile-nav-item.active {
  background: #24cbaa;
  color: white;
}



/* 图标样式（可以用实际的图标字体替换） */
.icon-home::before { content: '🏠'; }
.icon-skills::before { content: '⚡'; }
.icon-evolution::before { content: '🔄'; }
.icon-items::before { content: '📋'; }

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  

  
  .nav-mobile {
    display: block;
  }
  
  .mobile-menu {
    display: flex;
  }
}

@media (max-width: 1024px) {
  .nav-menu {
    gap: 30px;
  }
}
</style>